<template>
<div class="aside-wrapper">
  <div class="aside-container">
    <div class="menu-header">
      <div class="logo-mini">
        <img src="../assets/icon/login.png" class="mini-logo">
      </div>
      <div class="menu-title">图书管理系统</div>
    </div>
    
    <el-menu
        class="aside-menu"
        :default-active="path"
        @open="handleOpen"
        @close="handleClose"
        router
        :collapse="false"
        background-color="#ffffff" 
        text-color="#333333"
        active-text-color="#3a7bd5"
    >
      <el-menu-item index="/dashboard" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#icondashboard"></use>
          </svg>
        </div>
        <span slot="title">展示板</span>
      </el-menu-item>
      
      <div class="menu-divider"></div>
      
      <div class="menu-section">个人中心</div>
      <el-sub-menu index="2" popper-class="side-menu-popper">
        <template #title>
          <div class="menu-icon-container">
            <svg class="menu-icon" aria-hidden="true">
              <use xlink:href="#icon-mingpian"></use>
            </svg>
          </div>
          <span>个人信息</span>
        </template>
        <el-menu-item index="/person" class="submenu-item">
          <div class="menu-icon-container">
            <svg class="menu-icon" aria-hidden="true">
              <use xlink:href="#icon-a-bianji1"></use>
            </svg>
          </div>
          <span>修改个人信息</span>
        </el-menu-item>
        <el-menu-item index="/password" class="submenu-item">
          <div class="menu-icon-container">
            <svg class="menu-icon" aria-hidden="true">
              <use xlink:href="#icon-mima"></use>
            </svg>
          </div>
          <span>修改密码</span>
        </el-menu-item>
      </el-sub-menu>
      
      <div class="menu-divider"></div>
      
      <div class="menu-section">系统功能</div>
      <el-menu-item index="/user" v-if="user.role == 1" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconreader"></use>
          </svg>
        </div>
        <span slot="title">读者管理</span>
      </el-menu-item>
      <el-menu-item index="/book" v-if="user.role == 1" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconbook"></use>
          </svg>
        </div>
        <span slot="title">书籍管理</span>
      </el-menu-item>
      <el-menu-item index="/book" v-if="user.role == 2" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconbook"></use>
          </svg>
        </div>
        <span slot="title">图书查询</span>
      </el-menu-item>
      <el-menu-item index="/lendrecord" v-if="user.role == 1" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconlend-record"></use>
          </svg>
        </div>
        <span slot="title">借阅管理</span>
      </el-menu-item>
      <el-menu-item index="/lendrecord" v-if="user.role == 2" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconlend-record"></use>
          </svg>
        </div>
        <span slot="title">借阅信息</span>
      </el-menu-item>
      <el-menu-item index="/bookwithuser" class="menu-item">
        <div class="menu-icon-container">
          <svg class="menu-icon" aria-hidden="true">
            <use xlink:href="#iconlend-record"></use>
          </svg>
        </div>
        <span slot="title">借阅状态</span>
      </el-menu-item>
    </el-menu>
    
    <div class="menu-footer">
      <div class="menu-version">© 2023 图书馆管理系统</div>
    </div>
  </div>
</div>
</template>

<script>
export default {
  name: "Aside",
  components:{},
  created(){
    let userStr = sessionStorage.getItem("user") ||"{}"
    this.user = JSON.parse(userStr)
  },
  data(){
    return {
      user:{},
      path: this.$route.path
    }
  }
}
</script>

<style scoped>
.aside-wrapper {
  height: calc(100vh - 60px);
  position: relative;
  background-color: #f0f2f5;
}

.aside-container {
  width: 250px;
  height: 100%;
  display: flex;
  flex-direction: column;
  box-shadow: 2px 0 10px rgba(0, 0, 0, 0.05);
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

.aside-container::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 1px;
  height: 100%;
  background: #e8e8e8;
}

.menu-header {
  padding: 20px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #e8e8e8;
  background-color: rgba(58, 123, 213, 0.05);
}

.logo-mini {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
}

.mini-logo {
  width: 40px;
  height: 40px;
}

.menu-title {
  color: var(--text-primary);
  font-size: 16px;
  font-weight: 600;
  text-align: center;
}

.aside-menu {
  flex: 1;
  border-right: none;
  background-color: transparent;
}

.menu-section {
  font-size: 12px;
  color: var(--text-secondary);
  padding: 20px 20px 10px;
  text-transform: uppercase;
  font-weight: 500;
  letter-spacing: 0.5px;
}

.menu-divider {
  height: 1px;
  margin: 10px 20px;
  background: #e8e8e8;
}

.menu-item {
  display: flex;
  align-items: center;
  height: 50px;
  padding: 0 20px;
  margin: 5px 15px;
  border-radius: 8px;
  transition: all 0.3s;
  color: var(--text-primary) !important;
}

.menu-icon-container {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  margin-right: 12px;
}

.menu-icon {
  width: 18px;
  height: 18px;
  color: var(--text-secondary);
}

.menu-item:hover {
  background-color: rgba(58, 123, 213, 0.08) !important;
}

.menu-item.is-active {
  background: linear-gradient(90deg, var(--primary-color) 0%, rgba(58, 123, 213, 0.9) 100%) !important;
  box-shadow: 0 4px 15px rgba(58, 123, 213, 0.2);
  color: #ffffff !important;
}

.menu-item.is-active .menu-icon {
  color: white;
}

:deep(.el-submenu) {
  margin: 5px 15px;
  border-radius: 8px;
}

:deep(.el-submenu__title) {
  height: 50px;
  padding: 0 20px !important;
  border-radius: 8px;
  color: var(--text-primary) !important;
}

:deep(.el-submenu__title:hover) {
  background-color: rgba(58, 123, 213, 0.08) !important;
}

:deep(.el-submenu.is-active .el-submenu__title) {
  color: var(--primary-color) !important;
  font-weight: 600;
}

:deep(.el-menu--inline) {
  background-color: rgba(58, 123, 213, 0.05) !important;
  padding: 5px;
  border-radius: 6px;
  margin-top: 5px;
}

.submenu-item {
  height: 40px;
  padding-left: 20px !important;
  margin: 5px 0;
  border-radius: 6px;
  color: var(--text-primary) !important;
}

.submenu-item:hover {
  background-color: rgba(58, 123, 213, 0.08) !important;
}

.submenu-item.is-active {
  background: linear-gradient(90deg, var(--primary-color) 0%, rgba(58, 123, 213, 0.9) 100%) !important;
  color: #ffffff !important;
}

.menu-footer {
  padding: 15px 0;
  text-align: center;
  background: rgba(58, 123, 213, 0.05);
  border-top: 1px solid #e8e8e8;
}

.menu-version {
  font-size: 12px;
  color: var(--text-secondary);
}

:deep(.side-menu-popper) {
  background: #ffffff !important;
  border: 1px solid #e8e8e8 !important;
  border-radius: 8px !important;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1) !important;
}
</style>